<template>
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    <div class="left-nav">
      <i class="fa fa-circle" :style="{ color: color }" style="padding: 0 10px; font-size: 10px" v-tooltip="backendStatus"></i>

      <!-- 左上角logo -->
      <RouterLink class="navbar-brand" to="/">
        <strong>{{ name }}</strong>
      </RouterLink>

      <!--一个圆点-->
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon" />
      </button>
    </div>
    <div class="right-nav">
    <User class="nav-link" v-if="loginEnabled" />
    </div>
  </nav>
</template>

<script>
import User from "@/components/User";
import Status from "@/components/Status";

export default {
  name: "NavBar",
  components: { Status, User },
  data() {
    return {
      color: "blue",
      backendStatus: "Connection unknown",
    };
  },
  computed: {
    version() {
      return this.$store.state.info.version;
    },
    loginEnabled() {
      return this.$store.state.info.loginEnabled;
    },
    name() {
      return this.$store.state.info.name;
    },
    socket() {
      return this.$store.state.info.socket;
    },
    dataset() {
      let dataset = this.$store.state.dataset;
      if (dataset == null) return { name: "", id: "" };

      return dataset;
    },
  },
  watch: {
    socket(connected) {
      if (connected == null) {
        this.color = "white";
        this.backendStatus = "Connection unknown";
        return;
      }

      if (connected) {
        this.color = "green";
        this.backendStatus = "Connected to backend";
      } else {
        this.color = "red";
        this.backendStatus = "Could not connect to backend";
      }
    },
  },
};
</script>

<style scoped>
.navbar {
  background-color: white;
  height: 65px;
  padding: 0px;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.collapse {
  background-color: white;
  margin: 0px;
  padding-top: 1rem;
  padding-bottom: 0.8rem;
}
.nav-item {
  font-size: 16px;
}
.nav-link {
  color: rgba(0, 0, 0, 0.612) !important;
}
.navbar-brand {
  display: block;
  width: 200px;
}
.left-nav {
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  height: 100%;
}
.right-nav {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
</style>
